<template>
  <div class="main-div">
    <div class="inner-show-result-div">
      <template v-if="showResult === 1">
      </template>
      <template v-else-if="showResult == 2">
        <el-skeleton :rows="5"/>
      </template>
      <template v-else-if="showResult === 3">
        <div v-for="item in record">
          <AiRecordBox :content="item.content" v-if="item.roleType === AI_BOT_ROLE_TYPE"></AiRecordBox>
          <UserRecordBox :content="item.content" v-if="item.roleType === AI_USER_ROLE_TYPE"></UserRecordBox>
        </div>
      </template>
    </div>
    <div class="inner-input-block-div">
      <div class="inner-input-block-opera-div">
        <el-row>
          <el-col :span="2">
            <el-select v-model="modalKey" style="margin-left: 10px; margin-top: 5px;">
              <el-option v-for="item in configData" :value="item.value" :label="item.label"
                         :key="item.key || item.value"/>
              <template #prefix>
                <el-icon>
                  <tools/>
                </el-icon>
              </template>
            </el-select>
          </el-col>
        </el-row>
      </div>
      <div class="inner-input-block-input-div">
        <el-input v-model="inputValue" type="textarea" :rows="8" resize="none" class="no-border-input" placeholder="请输入问题!"></el-input>
      </div>
      <div class="inner-input-block-confirm-div">
        <el-button type="default" :icon="Check" circle style="margin-right: 10px" @click="confirmQuestion"></el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {Check, Tools} from '@element-plus/icons-vue'
import {aiChatReq, getModalConfigDropDownReq} from "@/api/ai/ai.ts";
import {RESPONSE_CODE_SUCCESS} from "@/config/common-config.ts";
import {checkIsNull} from "@/utils/check-utils.ts";
import AiRecordBox from "@/components/ai/question/AiRecordBox.vue";
import UserRecordBox from "@/components/ai/question/UserRecordBox.vue";
import {AI_BOT_ROLE_TYPE, AI_USER_ROLE_TYPE} from "@/constants/common-constant.ts";

const inputValue = ref<string>('');
const modalKey = ref<string>('');
const configData = ref<any>([]);
const modalResult = ref<string>('')
const showResult = ref<number>(1);
const zAiBotKey = ref<string>('');

const initConfigData = async () => {
  const res = await getModalConfigDropDownReq({})
  configData.value = res.data;
  modalKey.value = res.data[0].value;
}

const confirmQuestion = async () => {
  const params = {
    modalKey: modalKey.value,
    askStr: inputValue.value,
    zAiBotKey: zAiBotKey.value
  }

  record.value.push({
    roleType: AI_USER_ROLE_TYPE,
    content: inputValue.value
  })
  showResult.value = 2
  const res: any = await aiChatReq(params)
  if (res.code === RESPONSE_CODE_SUCCESS) {
    inputValue.value = ''
    showResult.value = 3
    // modalResult.value = res.data.answerStr
    record.value.push({
      roleType: AI_BOT_ROLE_TYPE,
      content: res.data.answerStr
    })
    if(checkIsNull(res.data.zAiBotKey)){
      zAiBotKey.value = ''
    } else {
      zAiBotKey.value = res.data.zAiBotKey
    }
  }
}

const record = ref<any>([]);

onMounted(async () => {
  initConfigData().then()
})
</script>

<style scoped>
.inner-show-result-div {
  width: 100%;
  height: 70%;
}

.inner-input-block-div {
  width: 100%;
  height: 30%;
  border: #2e2e2b 2px solid;
  border-radius: 10px;

}

.inner-input-block-opera-div {
  width: 100%;
  height: 15%;
}

.inner-input-block-input-div {
  width: 100%;
  height: 70%;
}

.inner-input-block-confirm-div {
  width: 100%;
  height: 15%;
  text-align: right;
}

:deep(.no-border-input .el-textarea__inner) {
  border: none;
  resize: none;
  outline: none;
  box-shadow: none;
}


</style>